<template>
  <a-pagination
    class="pagination"
    :total="total"
    simple
    hideOnSinglePage
    v-model:current="current"
    :defaultPageSize="defaultPageSize"
    @change="onPageNumChange"
  />
</template>

<script>
import { watchEffect } from "@vue/runtime-core";
import { useWindowScrollTo } from "@u/scroll";
import { useRouteParamChange } from "@u/router";
import { useLinkedRouteParam } from "@u/route";
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    defaultPageSize: {
      type: Number,
      default: 5,
    },
    hasScroll: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit }) {
    const current = useLinkedRouteParam("pageNum");
    watchEffect(() => {
      if (props.hasScroll) {
        useWindowScrollTo({ top: 0 }, "auto");
      }
      emit("change", current.value);
    });
    const pageNumParamChange = useRouteParamChange("pageNum");
    const onPageNumChange = (pageNum) => pageNumParamChange(pageNum);
    return {
      current,
      onPageNumChange,
    };
  },
};
</script>

<style scoped>
.pagination {
  text-align: center;
}
</style>